<template>
  <div class="dimensionalityOptions">
    <div class="btn-opea">
      <el-radio-group v-model="type">
        <el-radio-button label="商品维度" />
        <el-radio-button label="门店维度" />
      </el-radio-group>
    </div>
    <ProductType v-show="type === '商品维度'" />
    <StoreType v-show="type === '门店维度'" />
  </div>
</template>

<script setup>
import { useDimensionality } from './hooks'
import ProductType from './ProductType.vue'
import StoreType from './StoreType.vue'

const { type } = useDimensionality()

</script>

<style lang="less" scoped>
div{
  box-sizing: border-box;
}
:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-left: 1px solid #3480FF;
}

.dimensionalityOptions {
  margin-right: 12px;
  width: 300px;
  padding: 16px 0 0 0;
  background-color: #fff;
}

.btn-opea {
  margin-bottom: 16px;
  padding-left: 16px;
}

.formBox {
  padding:0 12px;
  border-bottom: 1px solid #DEDEDE;
}
</style>